Fetch
1. Fetch는 API다.
따라서, ECMAScript 스펙에 없다. API는 일반적으로 new키워드를 사용하여 인스턴스를 생성하지만, Fetch API는 fetch() 형태로 호출한다.
2. 비동기 환경에서 비동기로 통신을 한다.
3. XMLHttpRequest와 비슷하지만, CORS, HTTP 관련을 망라하여 지원한다.
4. 통신에 성공하면 Promise를 반환한다.
const url = "../../image/something.png";
fetch(url)
.then((response) => {
return response.blob();
})
.then((blob) => {
const el = document.querySelector("img");
el.src = URL.createObjectUrl(blob);
});
fetch(url)로 파라미터에 작성한 URL의 "something.png"파일을 비동기로 가져온다.- 파일 수신이 성공적으로 끝나면,
then()의 첫 번째 파라미터 핸들러 함수가 실행되며, fetch가 반환한 Promise 인스턴스가, 핸들러 함수의 파라미터 "response"로 맵핑되어 넘어간다. blob()메소드로, response 안에 있는 Blob Object를 추출하고, Promise 인스턴스를 생성한 후 다음 .then이 호출된다.- then이 진짜 반환하는 것은
return문의 표현식이 아니라 Promise 인스턴스다. return표현식에 달린 것은 다음 then의 핸들러 함수의 인자에 맵핑된다.
- then이 진짜 반환하는 것은
- 두 번째
.then((blob)=>{...})가 실행된다.- blob는 상위 then의 return문으로 넘긴 것이 된다.
5. fetch()가 비동기 환경에서 실행되므로, async/await를 사용할 수 있다.
async function getImage(url) {
const response = await fetch(url);
return response.blob();
}
const url = "../../image/something.png";
getImage(url).then((blob) => {
const el = document.querySelector("img");
el.src = URL.createObjectURL(blob);
});
- async 함수 안에
await fetch(url)이 작성되어 있다. - await 키워드에 의해, 이미지 정보를 다 받을 때 까지, 아래이 있는 코드가 실행되지 않는다.
await fetch(url)에서, 서버의 응답을 받을 때 까지 대기한다.- async함수는 따로 실행자가 없다. 응답을 받으면, 내부적으로 resolve함수가 호출된 것으로 동작한다.
- return 의 표현식은 resolve나 reject(성공/실패)함수의 파라미터로 맵핑된다.
- async가 성공적이었으면, then의 첫 번째 파라미터 핸들러가 동작하고, 반대의 경우 두 번째 파라미터 핸들러가 동작한다.
